<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div class="btn_wrapper" style="font-size: 12px; color: pink;">
            <span>说明：目前支持学科和关键字条件筛选</span>
            <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="$router.push('new')"
            >
            新增试题</el-button>
        </div>
       <el-form :model="formData" label-width="70px" style="margin-top: 15px;" ref="formData">
        <div class="header-box">
          <!-- 学科 -->
         <el-form-item label="学科" >
            <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            @change="valueChange"
             >
               <el-option
                  v-for="item in sublist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="二级目录" >
              <el-select v-model="formData.chilrenName" placeholder="请选择"  >
                <el-option
                  v-for="item in sublistClidren"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
        </el-form-item>
         <el-form-item label="标签" >
              <el-select v-model="formData.tagName" placeholder="请选择"  >
                <el-option
                  v-for="item in sublistTags"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
        </el-form-item>
        <!-- 关键字删选--还没写 -->
         <el-form-item label="关键字" >
           <el-input v-model="formData.keyword" style="width: 220px;" placeholder="请根据题干搜索" ></el-input>
        </el-form-item>
        </div>
         <!-- 试题类型等--顶部结构第二栏 -->
         <div class="header-box">
         <el-form-item label="试题类型" >
              <el-select v-model="formData.question" placeholder="请选择"  >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
             </el-select>
        </el-form-item>
         <el-form-item label="难度" >
              <el-select v-model="formData.difficulty" placeholder="请选择"  >
                 <el-option
                  v-for="item in difficultyType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
             </el-select>
        </el-form-item>
         <el-form-item label="方向" >
              <el-select v-model="formData.direction" placeholder="请选择"  >
                <el-option
                  v-for="item in directionType"
                  :key="item"
                  :label="item"
                  :value="item"
                />
             </el-select>
        </el-form-item>
         <el-form-item label="录入人" >
              <el-select v-model="formData.username" placeholder="请选择"  >
                <el-option
                  v-for="item in nameCreator"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                />
             </el-select>
        </el-form-item>
        </div>
         <div class="header-box">
          <!-- 头部第三栏 -->
         <el-form-item label="题目备注" >
            <el-input v-model="formData.remarks" style="width: 220px;" ></el-input>
        </el-form-item>
         <el-form-item label="企业简称" >
            <el-input v-model="formData.companyAb" style="width: 220px;" ></el-input>
        </el-form-item>
         <el-form-item label="城市" >
              <el-select
              v-model="formData.province"
              placeholder="请选择"
              style="width:110px;"
              @change="handleProvince"

              >
                 <el-option
                      v-for="item in citySelect.province"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
             </el-select>
             <el-select v-model="formData.city" placeholder="请选择" style="width:110px;"  >
               <el-option
                      v-for="item in citySelect.cityDate"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
             </el-select>
        </el-form-item>
        <el-form-item label="" >
          <div class="btnSmall">
              <el-button
              @click="resetForm"
              size="small"
              >清除</el-button>
            <el-button
            type="primary"
            @click="handleFilter"
            size="mini">
            搜索</el-button>
          </div>
         </el-form-item>
        </div>
       </el-form>
       <!-- tab标签页 -->
         <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first" ></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        <!-- 数据记录--alert组件 -->
        <el-alert
          :title="alertText"
          type="info"
          show-icon>
        </el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :data="tableData"
          style="width: 100%; margin-top:20px;"
          max-height="500">
          <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
          <el-table-column prop="questionType" :formatter="formatterQs" label="题型" width="80"></el-table-column>
          <el-table-column prop="question" label="题干" width="160">
            <template #default="{row}">
              <p v-html='row.question'></p>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="160">
            <!-- 处理时间格式---使用管道过滤 -->
                 <template #default="{row}">
              {{ row.addDate | formetDate() }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" :formatter="formatterDf" label="难度" width="120"></el-table-column>
          <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
          <el-table-column
          prop="chkState"
          :formatter="formatterCs"
          label="审核状态"
          width="120">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
          <el-table-column  label="发布状态" width="120">
             <template #default="{row}">
               {{ row| state_pub(row) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作"  width="220">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="editSub(row.id)">预览</el-button>
              <el-button type="text" size="small" @click="checkSub(row)"  :disabled="row.chkState!==0">审核</el-button>
              <el-button type="text" size="small" :disabled="row.publishState===1" @click="$router.push(`new?id=${row.id}`)">修改</el-button>
              <el-button type="text" size="small"  @click="openSub(row)">{{row.publishState===1?'下架':'上架'}}</el-button>
              <el-button type="text" size="small" :disabled="row.publishState===1" @click="delEmployee(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentpage"
        :page-size="5"
        :page-sizes="[5,10,15,20]"
        layout=" -> ,  prev, pager, next ,sizes,jumper"
        :total="total">
      </el-pagination>
        <!-- end -->
        <!-- 新增标签弹层 -->

      </el-card>
    </div>
   <questions-preview
   :showDialog="showDialog"
   @close="closeDialogFn"
   :data="data"
   ></questions-preview>
   <questions-check
   :showDialogChe.sync="showDialogChe"
   :dataCheckk="dataCheckk"
   @dataList="questionsList"
   ></questions-check>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as dirsimple } from '@/api/hmmm/directorys'
import { choice, detail, choicePublish, questionDel } from '@/api/hmmm/questions'
import * as EmployeeEnum from '@/api/hmmm/constants'
import { simple as Tagsimple } from '@/api/hmmm/tags'
import { simple as Usersimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'

export default {
  components: { QuestionsPreview, QuestionsCheck },
  name: 'QuestionsChoice',
  filters: {
    state_pub (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  data () {
    return {
      dataCheckk: {},
      // 审核
      showDialogChe: false,
      data: {},
      showDialog: false,
      activeName: 'first',
      // 省和市的数据
      citySelect: {
        province: [],
        cityDate: []
      },
      // 录入人
      nameCreator: [],
      questionType: EmployeeEnum.questionType,
      difficultyType: EmployeeEnum.difficulty,
      directionType: EmployeeEnum.direction,
      // alret的数据 最上边
      alertText: '',
      // 所有学科数据列表--一级目录学科的数据
      sublist: {},
      // 根据学科id判断二级目录--二级目录的数据
      sublistClidren: {},
      // 根据学科id判断标签--数据
      sublistTags: {},
      // 整个form
      formData: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        companyAb: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      tableData: [],
      total: 0,
      currentpage: 1
    }
  },
  // 通过计算属性判断后面的按钮是否显示
  computed: {
    // 审核状态

  },
  methods: {
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.formData.page = val
      this.questionsList()
    },
    // 每页条数
    handleSizeChange (val) {
      this.formData.page = 1
      this.formData.pagesize = val
      this.questionsList()
    },
    // 翻页按钮
    // handleSizeChange (size) {

    // },
    // 删除事件
    async delEmployee (row) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await questionDel(row)
      this.$message.success('删除成功')
    },
    // 上下架问题
    async openSub (row) {
      await this.$confirm(`您确认${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      row.publishState = row.publishState === 1 ? 0 : 1
      await choicePublish(row)
      this.$message.success(`${row.publishState === 0 ? '下架' : '上架'}成功`)
      this.questionsList()
    },
    // 审核按钮
    checkSub (row) {
      this.showDialogChe = true
      console.log(row)
      this.dataCheckk = row
    },
    // 关闭弹层--预览
    closeDialogFn () {
      this.showDialog = false
    },
    // 预览按钮
    async editSub (id) {
      const { data } = await detail({ id: id })
      console.log(data)
      this.data = data
      this.showDialog = true
    },
    // 点击Tab的方法
    handleClick (tab, event) {
      this.activeName = tab.name
      // console.log(tab, event)
      if (tab.name === 'first') {
        this.formData = {}
        this.questionsList()
      }
      if (tab.name === 'second') {
        this.formData.chkState = 0
        this.questionsList(this.formData)
      }
      if (tab.name === 'third') {
        this.formData.chkState = 1
        this.questionsList(this.formData)
      }
      if (tab.name === 'fourth') {
        this.formData.chkState = 2
        this.questionsList(this.formData)
      }
    },

    // 搜索信息
    handleFilter () {
      this.formData.page = 1
      this.questionsList(this.formData)
    },
    // 重置表单
    resetForm () {
      this.formData = {}
      this.questionsList()
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
      // console.log('省', this.citySelect.province)
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.formData.city = this.citySelect.cityDate[0]
      // console.log('市区', this.citySelect.cityDate[0])
    },
    // 获取录入人数据
    async getCreator () {
      const { data } = await Usersimple('')
      // console.log(data)
      this.nameCreator = data
    },
    // 处理题型格式问题
    formatterQs (row, column, cellValue, index) {
      return EmployeeEnum.questionType.find(item => item.value === +cellValue)?.label || '未知'
    },
    // 处理难度格式问题
    formatterDf (row, column, cellValue, index) {
      return EmployeeEnum.difficulty.find(item => item.value === +cellValue)?.label || '未知'
    },
    // 处理审核状态格式
    formatterCs (row, column, cellValue, index) {
      // console.log(cellValue)
      return EmployeeEnum.chkType.find(item => item.value === +(cellValue + 1))?.label || '未知'
    },
    // 处理发布状态格式
    formatterPb (row, column, cellValue, index) {
      return EmployeeEnum.publishType.find(item => item.value === +(cellValue))?.label || '未知'
    },
    // 精选题库数据列表
    async questionsList (params) {
      const { data: { items, counts } } = await choice(this.formData)
      // items是对象数组，数组里面是每一项需要渲染的数据
      this.tableData = items
      console.log(items)
      this.total = counts
      this.alertText = `数据一共${counts}条`
    },
    // 点学科表单改变的时候，触发改变二级目录和标签的方法
    async valueChange (e) {
      // console.log(this.formData.subName)
      // 二级目录数据
      const { data } = await dirsimple({ subjectID: e })
      this.sublistClidren = data
      // console.log(data)
      // 学科数据
      const { data: dataTag } = await Tagsimple({ subjectID: e })
      // console.log(dataTag)
      this.sublistTags = dataTag
    },
    // 渲染一级目录学科
    async sipleSub () {
      const { data } = await simple()
      this.sublist = data
    }
  },
  created () {
    // 获取头部学科数据
    this.sipleSub()
    // 获取table列表数据
    this.questionsList()
    // 获取录入人数据
    this.getCreator()
    // 获取省的数据
    this.getCityData()
  }

}
</script>

<style  lang="less" scoped>
.header-box{
  display: flex;
  justify-content: space-between;
}
.app-container {
    padding: 12px;
}
.btnSmall{
  width: 220px;
  display: flex;
  justify-content: end;

}
.btn_wrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
::v-deep{
  .el-pagination{
  margin-top:20px;
}
}
</style>
